<!--URL地址 :name="'c' + columnId"-->
<template>
  <el-input
    ref="domUrl"
    v-model="url.value"
    v-bind="extend"
    :id="'c' + columnId"
    :name="'c' + columnId"
    :size="size"
    :clearable="clearable"
    @blur="run"
    @change="run"
    @clear="run"
    @keydown="clear"
  >
    <template #prepend><!--前面的选项-->
      <el-select style="width: 90px;"
        v-model="url.http"
        :size="size"
        v-bind="extend"
      >
        <el-option label="Http://" value="Http://"></el-option>
        <el-option label="Https://" value="Https://"></el-option>
      </el-select>
    </template>
    <template #append><!--后面的域名后缀-->
      <el-autocomplete style="width: 100px;"
        class="inline-input"
        clearable
        v-model="url.com"
        :fetch-suggestions="querySearch"
        :size="size"
      ></el-autocomplete>
    </template>
  </el-input>
</template>

<script>
  import { reactive, ref, watch, defineComponent, onMounted } from 'vue'
  import { ElInput, ElSelect, ElOption, ElAutocomplete } from 'element-plus'
  // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController } from '../../map'

  /**
   * 处理url的管理类
   * * 功能：
   * ** 提交拼接后的完整的url
   * ** 监听属性，拆分属性到url
   * * 参数：
   * ** value： control类的value
   * ** mySubmit： control类的mySubmit，直接就提交了
   * * 返回
   * ** 绑定控件的 url
   * ** input事件的 urlSubmit
   */
  const urlManage = (value) => {
    // 域名后缀
    const comList = [
      { value: '.com' },
      { value: '.cn' },
      { value: '.net' },
      { value: '.gov' },
      { value: '.com.cn' },
      { value: '.net.cn' },
      { value: '.org.cn' },
      { value: '.gov.cn' },
      { value: '.org' },
      { value: '.top' },
      { value: '.vip' },
      { value: '.中国' },
      { value: '.企业' },
      { value: '.公司' },
      { value: '.网络' }
    ]

    // com的查询事件
    const querySearch = (str, cb) => {
      const results = str ?
        comList.filter((item) => item.value.indexOf(str.toLowerCase()) === 0)
        : comList

      // 调用 callback 返回建议列表的数据
      cb(results)
    }

    // 把url分成三份处理
    const url = reactive({
      http: 'Https://',
      com: '.com',
      value: ''
    })
    // 监听输入内容，整合 url 提交
    watch(url, (v1) => {
      value.value = url.http + url.value + url.com
    })

    // 监听属性，拆分，给 url 赋值
    watch(value, (v1) => {
      if (typeof v1 !== 'string') return
      if (v1 === null) return
      if (!v1) return

      const arrUrlAll = v1.toLowerCase().split('://')
      // console.log('父组件:', v1)
      // 判断 ://
      if (arrUrlAll.length === 1) { // 没有http://，直接算作url.value
        url.value = arrUrlAll[0]
      } else if (arrUrlAll.length === 2) {
        url.http = arrUrlAll[0] + '://'
        // 有http://，用 . 拆分后面的
        const arrUrl = arrUrlAll[1].split('.')
        const len = arrUrl.length
        let endPosition = 0
        switch (len) {
          case 1: // 只有一个，直接算作url.value
            url.value = arrUrl[0]
            break
          case 2: // 有两个，一个是url.value，一个是com
            url.value = arrUrl[0]
            url.com = '.' + arrUrl[1]
            break
          default: // 有两个以上，判断两个后缀的情况
            if (arrUrl[len - 1] === 'cn' && (arrUrl[len - 2] === 'com' || arrUrl[len - 2] === 'net' || arrUrl[len - 2] === 'org' || arrUrl[len - 2] === 'gov')) {
              endPosition = len - 2
              url.com = '.' + arrUrl[endPosition] + '.cn'
            } else {
              endPosition = len - 1
              url.com = '.' + arrUrl[endPosition]
            }
            url.value = arrUrl[0]
            for (let i = 1; i < endPosition; i++) {
              url.value += '.' + arrUrl[i]
            }
            break
        }
      }
    })

    return {
      url,
      querySearch
    }
  }

  export default defineComponent({
    name: 'el-form-item-url',
    inheritAttrs: false,
    components: {
      ElInput, ElSelect, ElOption, ElAutocomplete
    },
    props: {
      modelValue: [String],
      ...itemProps // 基础属性
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      // console.log('url的属性', props)
      const {
        value,
        run,
        clear
      } = itemController(props, context.emit)

      // const { url, querySearch, urlSubmit } = urlManage(value, mySubmit)

      const domUrl = ref(null)
      onMounted(() => {
        setTimeout(() => {
          // console.log('ddd', domUrl.value.$el.lastElementChild)
          // domUrl.value.$el.lastElementChild.style.backgroundColor = '#fdfdfd'
        }, 300)
      })
  
      return {
        domUrl,
        run,
        clear,
        ...urlManage(value)
        // querySearch, // com的筛选的函数
        // url, // url 相关的值
      }
    }
  })
</script>
